import React, { useImperativeHandle, useRef, useState } from 'react';

import { intl } from '@/utils';
import { Button, Drawer, Tabs, Tooltip } from 'antd';
import getIcon from '@/utils/icon';
// import DgAttach from '../DgAttach';
import AttributeDgProps from './components/AttributeDgProps';
// import type { AuditPaperItem } from '@/pages/AuditPaper/data';
// import { HocVerticalTab } from '~/public/cpas-ui/components-ui/ant-components/AntTab';
// import AntTabsPanel from '~/public/cpas-ui/components-ui/ant-components/AntTab/AntTabsPanel';
import { CpasIcon } from '~/public/cpas-ui';
import AttributeDraft from './components/AttributeDraft';
import AntTabs, { HocVerticalRightStyleTab } from '~/public/cpas-ui/components-ui/ant-components/AntTab';
/**
 * 审计底稿关系 抽屉 Drawer
 * @param props
 * @returns
 */
// type TabType = 'draft' | 'sheets' | 'props';
const RelationDrawer: React.FC<any> = React.forwardRef((props: any, ref) => {
  const { fjRefreshEvents } = props
  const [visible, setVisible] = useState(false);
  const [actTab, setActTab] = useState<string>('');
  const [dginfoData, setDginfo] = useState<any>();

  const AttributeDraftRef = useRef<any>();
  const AttributeDgPropsRef = useRef<any>();



  // 自定义方法
  useImperativeHandle(ref, () => ({
    show: (dgInfo: any, tab: string) => {
      setVisible(true);
      setDginfo(dgInfo);
      setActTab(tab);
      setTimeout(() => {
        if (tab === 'draft' && AttributeDraftRef?.current) {
          AttributeDraftRef?.current?.refresh(dgInfo);
        } else if (tab === 'props' && AttributeDgPropsRef?.current) {
          AttributeDgPropsRef?.current?.refresh(dgInfo);
        }
      }, 200);

    },
    close: () => {
      setVisible(false);
    },
  }));
  async function RefreshFj(value: boolean) {
    if (value) await props.DrawerResh(true);
  }
  const fjRefreshEvent = (v: boolean) => {
    if (v) fjRefreshEvents(true)
  }

  return (
    <Drawer
      title={
        <>
          <span style={{ marginRight: '8px' }}>{getIcon('InfoCircle')}</span>
          <span style={{ fontWeight: 700 }}>{dginfoData?.fjName}{' '}</span>

        </>
      }
      maskClosable={false}
      placement="right"
      closable={false}
      onClose={() => {
        setVisible(false);
      }}
      visible={visible}
      getContainer={false}
      key="right"
      width={480}
      extra={
        <Tooltip placement="bottom" title={intl('close', '关闭')}>
          <Button
            type="text"
            danger
            onClick={() => {
              setVisible(false);
            }}
            style={{ color: '#000' }}
          >
            {<CpasIcon type={"icon-close"} fontSize={16} />}
          </Button>
        </Tooltip>
      }
    >
      <HocVerticalRightStyleTab
        activeKey={actTab}
        tabPosition="right"
        style={{ height: '100%' }}
        onChange={(val: string) => {
          setActTab(val);
          setTimeout(() => {
            if (val === 'draft' && AttributeDraftRef?.current) {
              AttributeDraftRef?.current?.refresh(dginfoData);
            } else if (val === 'props' && AttributeDgPropsRef?.current) {
              AttributeDgPropsRef?.current?.refresh(dginfoData);
            }
          }, 200);

        }}
        tabBarExtraContent={<Button type="text"> {getIcon('QuestionCircle')} </Button>}
      >


        {/* <AntTabs defaultActiveKey="1"
        tabPosition="right"
        onChange={(val: string) => {
          setActTab(val);
          setTimeout(() => {
            if (val === 'draft' && AttributeDraftRef?.current) {
              AttributeDraftRef?.current?.refresh(dginfoData);
            } else if (val === 'props' && AttributeDgPropsRef?.current) {
              AttributeDgPropsRef?.current?.refresh(dginfoData);
            }
          }, 200);

        }}
        activeKey={actTab}
      >
 </AntTabs> */}
        <AntTabs.Panel
          style={{ height: '100%' }}
          key="draft"
          tab={
            <div style={{
              display: 'flex', writingMode: 'vertical-rl',
              alignContent: 'center',
              alignItems: 'center'
            }}>
              <div style={{ marginBottom: 8, textAlign: 'center' }}>{getIcon('PaperClip')}</div>
              <span>底稿</span>
            </div>
          }
        >
          <AttributeDraft fjid={dginfoData?.fjid} ref={AttributeDraftRef} />
        </AntTabs.Panel>
        <AntTabs.Panel
          style={{ height: '100%' }}
          key="props"
          tab={
            <div style={{
              display: 'flex', writingMode: 'vertical-rl',
              alignContent: 'center',
              alignItems: 'center'
            }}>
              <div style={{ marginBottom: 8, textAlign: 'center' }}>{getIcon('InfoCircle')}</div>
              <span>属性</span>
            </div>
          }
        >
          <AttributeDgProps
            fjid={dginfoData?.fjid}
            dginfoData={dginfoData}
            onCloseDrawer={() => {
              setVisible(false)
            }}
            ref={AttributeDgPropsRef}
            fjRefreshEvent={fjRefreshEvent}
          />
        </AntTabs.Panel>

      </HocVerticalRightStyleTab>
      {/* <HocVerticalRightStyleTab
        className='DrawerStyle'
        activeKey={actTab}
        tabPosition="right"
        style={{ height: '100%', width: '99%' }}
        onChange={(newActiveKey: string) => setActTab(newActiveKey)}
      >
        <AntTabs.Panel
          style={{ height: '100%' }}
          key="draft"
          tab={
            <span>
              {getIcon('PaperClip')}
              {intl('paper.relationDrawer.draft', '底稿')}
            </span>
          }
        >
          <AttributeDraft fjid={dginfoData?.fjid} ref={AttributeDraftRef} />
        </AntTabs.Panel>
        <AntTabs.Panel
          style={{ height: '100%' }}
          key="props"
          tab={
            <span>
              {getIcon('InfoCircle')}
              {intl('paper.relationDrawer.props', '属性')}
            </span>
          }
        >
          <AttributeDgProps
            fjid={dginfoData?.fjid}
            dginfoData={dginfoData}
            onCloseDrawer={() => {
              setVisible(false)
            }}
            fjRefreshEvent={fjRefreshEvent}
          />
        </AntTabs.Panel>
      </HocVerticalRightStyleTab> */}


    </Drawer>
  );
});

export default React.memo(RelationDrawer);
